import "./index.css";
import {
  PlusCircleFilled,
  MoreOutlined,
  FileExclamationOutlined,
  ThunderboltOutlined,
} from "@ant-design/icons";
import TitleBar from "../../components/titleBar";
import { useState, useEffect } from "react";
import Popup from "./components/popup";
import {} from "@ant-design/icons";
import { Switch } from "antd";
import BScroll from "@better-scroll/core";
function Shebei() {
  let [title, setTitle] = useState("设备");
  let [show, setShow] = useState(false);
  //   弹框相关
  function changeShow() {
    setShow(!show);
  }
  function popSub(value: any) {
    console.log(value);
  }
  //   设备数据
  let [shebeiData, setShebeiData] = useState([
    {
      id: 1,
      icon: FileExclamationOutlined,
      name: "门锁开关",
      position: "大厅",
      check: true,
      dianliang: 90,
      date: "2022/02/17",
    },
    {
      id: 2,
      icon: FileExclamationOutlined,
      name: "运动检测器",
      position: "客厅",
      check: false,
      dianliang: 70,
      date: "2022/02/17",
    },
    {
      id: 3,
      icon: FileExclamationOutlined,
      name: "插座",
      position: "卧室",
      check: true,
      dianliang: 50,
      date: "2022/02/17",
    },
    {
      id: 4,
      icon: FileExclamationOutlined,
      name: "烟雾报警器",
      position: "厨房",
      check: true,
      dianliang: 90,
      date: "2022/02/17",
    },
    {
      id: 5,
      icon: FileExclamationOutlined,
      name: "恒温器",
      position: "客厅",
      check: false,
      dianliang: 90,
      date: "2022/02/17",
    },
    {
      id: 6,
      icon: FileExclamationOutlined,
      name: "摄像头",
      position: "客厅",
      check: true,
      dianliang: 90,
      date: "2022/02/17",
    },
    {
      id: 7,
      icon: FileExclamationOutlined,
      name: "充数",
      position: "厨房",
      check: false,
      dianliang: 90,
      date: "2022/02/17",
    },
  ]);
  //   修改数据
  function changeCheck(id: number) {
    let res = shebeiData.map((item: any) => {
      if (item.id === id) {
        item.check = !item.check;
      }
      return item;
    });
    setShebeiData(res);
  }
  // bs
  // useEffect(() => {
  //   console.log("didmount");
  //   new BScroll(".tablemain", {

  //   });
  // }, []);
  return (
    <div className="shebei">
      <Popup
        title="添加设备"
        show={show}
        ok={popSub}
        cancel={changeShow}
      ></Popup>
      <TitleBar
        Icon={PlusCircleFilled}
        title={title}
        callback={changeShow}
      ></TitleBar>
      <div className="shebeiMain">
        <div className="tablehead">
          <div>设备</div>
          <div>名称</div>
          <div>名称位置</div>
          <div>状态</div>
          <div>电量</div>
          <div>日期</div>
          <div>操作</div>
        </div>
        <div className="tablemain">
          <div className="content">
            {shebeiData &&
              shebeiData.map((item) => {
                return (
                  <div className="tableitem" key={item.id}>
                    <div>
                      <item.icon style={{ fontSize: "40px" }}></item.icon>
                    </div>
                    <div>{item.name}</div>
                    <div>{item.position}</div>
                    <div>
                      <Switch
                        defaultChecked
                        onChange={() => changeCheck(item.id)}
                      />
                    </div>
                    <div>
                      {item.check && (
                        <ThunderboltOutlined
                          className="dianliangIcon"
                          style={
                            item.dianliang >= 60
                              ? { color: "#05c985" }
                              : { color: "#e94134" }
                          }
                        />
                      )}
                      {!item.check && (
                        <ThunderboltOutlined
                          className="dianliangIcon"
                          style={
                            item.dianliang >= 60
                              ? { color: "#1677ff" }
                              : { color: "#ffab4f" }
                          }
                        />
                      )}
                    </div>
                    <div>{item.date}</div>
                    <div>
                      <MoreOutlined />
                    </div>
                  </div>
                );
              })}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Shebei;
